<template>
	<view class="page">
		<CustomNav :isBack="true" color="#fff" :topBgColor="topBgColor" :title="title"></CustomNav>
		<image :src="cloudStorage+'/detail_bg_zl.png'" class="bg-img" mode="widthFix"></image>
		<view class="info-block">
			<LineTitle :title="title"></LineTitle>
			<view class="search-block">
				<input placeholder="请输入关键词" v-model="keyword" class="search-crl" />
				<view class="btn normal" @click="search">搜索</view>
			</view>
			<view class="info-content">
				<view class="info-item" v-for="item in searchList" :key="item.id"
					@click="navigate('/page_pack/agriculture/detail?name='+item.title+'&id='+item.id)">
					<view class="title">{{item.title}}</view>
					<image :src="cloudStorage+'/right.png'" class="right"></image>
				</view>
			</view>
		</view>
		<Back></Back>
	</view>
</template>

<script>
	import LineTitle from '@/components/LineTitle/LineTitle.vue'
	import Back from '@/components/Back.vue'
	export default {
		components: {
			LineTitle,
			Back
		},
		data() {
			return {
				keyword: '',
				title: '',
				searchList: [],
				list: [
					{ id: 1, title: '全市各县市区农业情况' },
					{ id: 2, title: '乡镇一产增加值指标情况' },
					{ id: 3, title: '乡镇农业发展情况' },
					{ id: 4, title: '一产增加值构成情况' },
					{ id: 5, title: '乡镇基本情况' },
					{ id: 6, title: '农业发展路径分析' },
					{ id: 7, title: '土地经营情况' },
					{ id: 8, title: '农作物种植结构' },
					{ id: 9, title: '农作物种植效益' },
					{ id: 10, title: '戈壁生态设施农业情况' },
					{ id: 11, title: '农产品品牌情况' },
					{ id: 12, title: '现代种业产业链发展情况' },
					{ id: 13, title: '优质蔬菜产业链发展情况' },
					{ id: 14, title: '辣椒产业链发展情况' },
					{ id: 15, title: '洋葱产业链发展情况' },
					{ id: 16, title: '特色林果产业链发展情况' },
					{ id: 17, title: '白酒生产企业及小作坊情况' },
					{ id: 18, title: '肉羊产业链发展情况' },
					{ id: 19, title: '肉牛产业链发展情况' },
					{ id: 20, title: '生猪产业链发展情况' },
					{ id: 21, title: '草产业发展情况' },
					{ id: 22, title: '畜牧产业发展情况' },
					{ id: 23, title: '畜牧产业发展计划' },
					{ id: 24, title: '国土绿化情况' },
					{ id: 25, title: '高标准农田建设情况' },
					{ id: 26, title: '脱贫攻坚及乡村振兴有效帮扶情况' },
					{ id: 27, title: '农房改造情况' },
					{ id: 28, title: '生态及地质灾害避险搬迁情况' },
					{ id: 29, title: '农村基础设施情况' },
					{ id: 30, title: '移民情况统计表' },
					{ id: 31, title: '农业产业园区情况' },
					{ id: 32, title: '农业产业化龙头企业情况' },
					{ id: 33, title: '农业新型经营主体建设情况' },
					{ id: 34, title: '水资源概况' },
					{ id: 35, title: '河流情况' },
					{ id: 36, title: '河流名录' },
					{ id: 37, title: '水库情况' },
					{ id: 38, title: '湖库名录' },
					{ id: 39, title: '机井情况' },
					{ id: 40, title: '大中型灌区情况' },
					{ id: 41, title: '水资源管理情况' },
					{ id: 42, title: '水网建设规划重点项目' },
					{ id: 43, title: '农村供水工程情况' },
					{ id: 44, title: '供销社工作情况' }
				]
			}
		},
		watch: {

		},
		methods: {
			search() {
				this.searchList = this.list.filter(item => item.title.includes(this.keyword))
			}
		},
		onLoad(e) {
			this.title = e.title
			this.searchList = this.list
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		overflow: hidden;
		min-height: 100vh;
		background-color: #f8f8f8;

		.bg-img {
			width: 100%;
		}

		.info-block {
			position: relative;
			padding: 30rpx;

			.search-block {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FFFFFF;
				border-radius: 50rpx;
				height: 80rpx;
				margin-top: 30rpx;
				padding: 0 30rpx;

				.search-crl {
					width: calc(100% - 160rpx);
				}

				.btn {
					width: 140rpx;
					height: 60rpx;
					font-size: 30rpx;
				}
			}

			.info-item {
				margin-top: 30rpx;
				width: 100%;
				height: 140rpx;
				padding: 30rpx;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FFFFFF;

				.title {
					font-size: 32rpx;
				}

				.right {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>